<template>
  <div class="shop">
    <header :class="isScroll? 'header':''">
      <div class="navigator">
        <span> <navigator url='../city/city'>北京</navigator> </span>
        <input type="text" placeholder="搜索好物" />
      </div>
    </header>
    <div class="banner">
      <swiper
        class="swiper"
        indicator-dots="true"
        autoplay="true"
        interval="2000"
        duration="500"
        circular="true"
      >
        <swiper-item class="bItem" v-for="item in bannerList" :key="item.id">
          <navigator>
            <img class="bannerImg" :src="item.picUrl" alt="" />
          </navigator>
        </swiper-item>
      </swiper>
    </div>
    <div class="nav">
      <navigator>火爆专场</navigator>
      <navigator>火锅串串</navigator>
      <navigator>地方特色</navigator>
      <navigator>日韩料理</navigator>
      <navigator>美食集合</navigator>
    </div>
    <div class="new">
      <h2>今日上新</h2>
      <div class="new_content">
        <div>
          <span class="new_contentItem">
            <dl>
              <dt></dt>
              <dd></dd>
            </dl>
          </span>
          <span class="new_contentItem">
            <dl>
              <dt></dt>
              <dd></dd>
            </dl>
          </span>
          <span class="new_contentItem">
            <dl>
              <dt></dt>
              <dd></dd>
            </dl>
          </span>
          <span class="new_contentItem">
            <dl>
              <dt></dt>
              <dd></dd>
            </dl>
          </span>
        </div>
      </div>
    </div>
    <div class="brand">
      <h2>大牌优选</h2>
      <div class="brand_content">
        <div>
          <span class="brand_contentItem">
            <dl>
              <dt></dt>
              <dd></dd>
            </dl>
          </span>
          <span class="brand_contentItem">
            <dl>
              <dt></dt>
              <dd></dd>
            </dl>
          </span>
          <span class="brand_contentItem">
            <dl>
              <dt></dt>
              <dd></dd>
            </dl>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBanner } from "../../service/index";
export default {
  data() {
    return {
      bannerParams: {
        cityId: 19,
        mwAuthToken:
          "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqtPCSKhwebLrgjfpX-CQWJIcZYXmpdLdIF3rNSY-BJe8dSyjtMBhBHk20pqzLLrwWAX-Cq4yzX-ChX-Csk9vBdT1EflbSDPNZFGgxBc5VnC14kzL8imwH7UY-BgBh0Yhgu8NUZXa5Gthb4rm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
        mAuthToken:
          "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqtPCSKhwebLrgjfpX-CQWJIcZYXmpdLdIF3rNSY-BJe8dSyjtMBhBHk20pqzLLrwWAX-Cq4yzX-ChX-Csk9vBdT1EflbSDPNZFGgxBc5VnC14kzL8imwH7UY-BgBh0Yhgu8NUZXa5Gthb4rm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
        fromw: 1401,
      },
      bannerList: [],
      isScroll:false
    };
  },
  async onShow() {
    let res = await getBanner(this.bannerParams);
    console.log(res);
    if (res.errNo === 0) {
      this.bannerList = res.data;
    }
  },
  methods: {
    
  },
  onPageScroll(scrollTop){
    // console.log(scrollTop.scrollTop)
    if(scrollTop.scrollTop > 150){
      this.isScroll = true
    }else {
      this.isScroll = false
    }
    // console.log(this.isScroll)
  }
};
</script>

<style scoped>
.shop {
  width: 100%;
  background-color: #f2f2f2;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding-bottom: 10rpx;
  z-index: 9;
}
.header{
  background-color: rgb(233, 63, 63);
}
.navigator {
  padding-top: 50rpx;
  height: 60rpx;
  display: flex;
}
.navigator > span {
  margin-left: 24rpx;
  color: #fff;
}
.navigator > input {
  border-radius: 40rpx;
  padding: 6rpx 0 6rpx 40rpx;
  margin-left: 40rpx;
  background: rgba(214, 206, 206, 0.3);
}
.banner {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 400rpx;
}
.swiper {
  width: 100%;
  height: 400rpx;
}
.bannerImg {
  width: 100%;
  height: 400rpx;
}
.nav {
  width: 94%;
  height: 200rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: absolute;
  top: 360rpx;
  left: 20rpx;
  border-radius: 20rpx;
}
.new {
  width: 94%;
  margin: 200rpx auto 0;
  background-color: #fff;
  border-radius: 20rpx;
  padding-bottom: 16rpx;
}
.new > h2 {
  height: 60rpx;
  line-height: 60rpx;
  margin-left: 16rpx;
  font-weight: bolder;
}
.new_content {
  display: flex;
  white-space: nowrap;
  overflow-x: auto;
  margin: 16rpx 0;
}
  ::-webkit-scrollbar{
    display:none;
  }
.new_contentItem {
  display: inline-block;
  width: 230rpx;
  height: 360rpx;
  background: red;
  margin: 0 20rpx;
}
.brand {
  width: 94%;
  margin: 20rpx auto 0;
  background-color: #fff;
  border-radius: 20rpx;
  padding-bottom: 16rpx;
}
.brand>h2{
  height: 60rpx;
  line-height: 60rpx;
  margin-left: 16rpx;
  font-weight: bolder;
}
.brand_content {
  display: flex;
  white-space: nowrap;
  overflow-x: auto;
  margin: 16rpx 0;
}
.brand_contentItem {
  display: inline-block;
  width: 230rpx;
  height: 360rpx;
  background: red;
  margin: 0 20rpx;
}
</style>